<template>
	<view>
		<view class="mid-content" :style="{'min-height':minHeight}">
			<!--
			    author: 李文昊
			    mid-content-ul: 外包围的是根据传进的个数，及每排安排的项个数，来循环有多少行
				content-item: 合同、发票等项
				slice:截取原数组navList的第i到第j项
				item.imgurl: 图片
				item.name: 项名称
			-->
			<view class="mid-content-ul" v-for="(it,inde) in rows" :key="inde">
				<view :style="{'width':uiWidth}" class="content-item"
					v-for="item in navList.slice((it-1)*numberOfRows,numberOfRows+(it-1)*numberOfRows)" :key="item.id">
					<view class="toUrl" @click="confirmRule(item)">
						<i v-if="item.pendingNum > 0" class="tip"></i>
						<image class="nav-imgbo" :src="item.imgurl"></image>
						<view class="nav-item-p">
							<text class="nav-span">{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" backgroundColor="#f0f0f0" type="center">
			<scroll-view scroll-y="true" style="height: 1000rpx;width: 750rpx;background-color: #f0f0f0;margin-top: 20rpx;margin-bottom: 10rpx;" scroll-with-animation="true">
				<ruleDisplay :htmlStr="roleInfo" @getClick="closePop"></ruleDisplay>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrderList,
		syncRuleInfo,
	} from "../../util/network.js"
	/**
	 * author: 李文昊
	 * uiWidth(): 每一项的宽度计算属性
	 * rows()：计算行数，并向上取整
	 */
	export default {
		data() {
			return {
				roleInfo:'',
				currentItem:'',
			}
		},
		props: {
			numberOfRows: Number,
			navList: Array,
			minHeight:String
		},
		computed: {
			uiWidth() {
				return 100 / this.numberOfRows + '%';
			},
			rows() {
				return Math.ceil(this.navList.length / this.numberOfRows);
			}
		},
		methods:{
			confirmRule(item){
				let serviceType = 0
				if(item.type == 0){
					serviceType = 10
				}else{
					serviceType = 9
				}
				this.currentItem = item
				if(item.type == null){
					uni.navigateTo({
						url:this.currentItem.href
					})
					return 0
				}
				let rule = syncRuleInfo(serviceType)
				rule.then((res) => {
					console.log(res)
					try{
						this.roleInfo = res.data.data.text
					}catch(e){
						//TODO handle the exception
					}
					// let url = '../chargedServiceApplication/details/details?state=待申请' + '&state=待申请'
					
					uni.navigateTo({
						url:'../../pages/ruleDisplay/ruleDisplay?url=' + encodeURIComponent(this.currentItem.href) + '&htmlStr=' + encodeURIComponent(this.roleInfo)
					})
					// this.$refs.popup.open('center')
				})

			},
			closePop(){
				this.$refs.popup.close()
				uni.navigateTo({
					url:this.currentItem.href
				})
			},
			toUrl(value){
				let a = syncGetOrderList("goods-release/list", [0], 0, 8)
				 a.then((res)=>{
					 if(res.data.code == 200){
						uni.navigateTo({
							url: value
						});
					}else {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}
				})
			},
			
		}
	}
</script>

<style>
	.mid-content {
		width: 100%;
		/* 消除内容边距 */
		font-size: 0;
	}

	.mid-content-ul {
		/* 清除浮动 */
		overflow: hidden;
	}

	.content-item {
		position: relative;
		float: left;
		/* 图片水平居中 */
		text-align: center;
		padding-bottom: 18rpx;
		border-right: 0rpx solid rgba(238, 238, 238, 1);
		font-size: 0;
	}

	.nav-imgbo {
		height: 64rpx;
		width: 64rpx;
		margin-top: 16rpx;
	}

	.nav-item-p {
		margin-top: 8rpx;
	}

	.nav-span {
		display: inline-block;
		/* width: 96rpx; */
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #212121;
	}
	.tip {
		width:10px;
		height:10px;
		line-height:20px;
		font-size:10px;
		color:#fff;
		text-align:center;
		background-color:#f00;
		border-radius:50%;
		position:absolute;
		right:10px;
		top:0px;
		}
</style>
